<script setup>
import { ref } from 'vue'
import ApplicationItem from './ApplicationItem.vue'
import { showImagePreview } from 'vant'
let buttonColo = '#736D6D'
let btnType = 'donw'
const show = ref(false)
const showImg = (img) => {
  showImagePreview({
    images: [props.itemData.pic],
    closeable: true,
  })
}

const props = defineProps({
  itemData: {
    type: Object,
    default: {
      pic: 'https://sysgamer.com/gameres/pic/banner1.jpg',
    }, //advertising  cloud
  },
  bgColor: {
    type: String,
    default: '#31282a', //advertising  cloud
  },
  btnHight: {
    type: String,
    default: '60px', //advertising  cloud
  },
  showTitil: {
    type: Boolean,
    default: false, //advertising  cloud
  },
})
// https://t14.baidu.com/it/u=183885528,1591047767&fm=58&app=83&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000
</script>
<template>
  <div class="application-box">
    <div class="application-box-title" v-if="showTitil">
      <!-- <div class="small-title">现已推出</div> -->
      <!-- <div class="application-title">原神</div>
      <div class="small-tip">五星角色流浪者复刻</div> -->
    </div>
    <van-image
      width="100%"
      radius="12"
      :src="itemData.picture_url"
      style="margin-top: 6px; height: 210px"
      @click="showImg()"
    />

    <!-- <ApplicationItem
      class="application-box-introduce"
      :buttonColo="buttonColo"
      :bgColor="bgColor"
      :btnType="'down'"
      :itemData="props.itemData"
      :btnHight="btnHight"
    ></ApplicationItem> -->
  </div>
</template>

<style lang="scss" scoped>
.application-box {
  position: relative;
  &-introduce {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0 0px 10px 10px;
  }
  .small-title {
    color: var(--van-button-primary-background);
    font-size: 10px;
    font-weight: bold;
  }
  .application-title {
    font-size: 22px;
    margin: 4px 0;
  }
  .small-tip {
    color: rgb(129, 129, 129);
    font-size: 20px;
  }
}
.van-dialog {
  position: relative;
  .close-icon-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    // #1E2025
    color: #fff;
    font-size: 26px;
    // background: #fff;
  }
}
</style>
